<template>
  <div class="content-card">
    <div class="title">
      <a-icon type="tags"></a-icon>
      <span>{{ "五大基础库数据总量" }}</span>
    </div>
    <div class="body">
      <div id="data-assemble__chart6"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "a6-chart",
  props: {
    baseTop5Name: {
      type: Array,
      default: () => [],
    },
    baseTop5Value: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      xdata: [],
      ydata: [],
    };
  },
  methods: {
    registerAndSetCharts() {
      let chartRef = this.$echarts.init(
        document.getElementById("data-assemble__chart6")
      );
      let option = {
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "shadow",
            label: {
              backgroundColor: "#283b56",
            },
          },
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        yAxis: {
          name: "亿",
          splitNumber: 5,
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#eee",
            },
          },
          axisLabel: {
            show: true, //不显示坐标轴的数字
            color: "#aaa", //坐标值得具体的颜色
          },
          axisLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "#aaa", //坐标线的颜色
            },
          },
        },
        xAxis: {
          // data: ["工信局", "市场监管", "文旅", "发改委"],
          data: this.xdata,
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "#aaa",
            },
          },
        },
        series: [
          {
            type: "bar",
            barWidth: 8,
            itemStyle: {
              borderRadius: 1,
            },
            // data: [2.8203, 1.4809, 0.9034, 0.497],
            data: this.ydata,
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#93B9FF" },
              { offset: 1, color: "#5C87D4" },
            ]),
          },
        ],
      };
      chartRef.setOption(option);
    },
  },
  mounted() {
    this.registerAndSetCharts();
  },
  watch: {
    baseTop5Name(n) {
      this.xdata = n;
      this.registerAndSetCharts();
    },
    baseTop5Value(n) {
      this.ydata = n;
    },
  },
};
</script>

<style lang="less" scoped>
.content-card {
  // bor
  height: 100%;
  .title {
    display: flex;
    align-items: center;
    padding: 10px 0;
    background: linear-gradient(to right, #dee9ff, #ffffff);
    i {
      color: #6989c6;
      margin: 0 15px;
      font-size: 18px;
    }
    span {
      font-size: 16px;
      font-weight: 500;
    }
  }
  .body {
    width: 100%;
    height: 200px;
    :first-child {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
